<template>
  <div class="table-box" v-loading="loading">
    <ProTable
      ref="proTable"
      title="事件列表"
      rowKey="sn"
      :columns="columns"
      :request-api="getTableList"
      :data-callback="dataCallback"
      v-if="columns.length"
    >
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="cabinetInfo">
import { ref, onMounted } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { getOplogList, getOperatorsSelList } from "@/api/modules/accessControl/query/index";
const loading = ref(false);
const hotelSelList = ref([]);
let columns: any = ref([]);
const proTable = ref();

const dataCallback = (data: any) => {
  const { records, page } = data;
  loading.value = false;
  return {
    list: records,
    total: page.total
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return getOplogList({ ...newParams });
};

/**
 * 获取酒店选择列表
 */
const getOperatorsSelData = async () => {
  try {
    const res = await getOperatorsSelList();
    hotelSelList.value = res.data;
    columns.value = [
      { prop: "traceLogId", label: "序号", width: 120 },
      {
        prop: "startTime",
        label: "开始时间",
        isShow: false,
        search: { el: "date-picker", props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" } }
      },
      {
        prop: "endTime",
        label: "结束时间",
        isShow: false,
        search: { el: "date-picker", props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" } }
      },
      {
        prop: "userId",
        label: "操作员",
        enum: hotelSelList,
        search: { el: "select" },
        isShow: false
      },
      {
        prop: "createdAt",
        label: "操作时间",
        minWidth: 200
      },
      {
        prop: "clientIp",
        label: "终端",
        minWidth: 200
      },
      {
        prop: "apiName",
        label: "操作内容",
        minWidth: 300
      },
      {
        prop: "userName",
        label: "操作员",
        minWidth: 200
      }
    ];
  } catch (error) {
    columns.value = [
      { prop: "traceLogId", label: "序号", width: 120 },
      {
        prop: "startTime",
        label: "开始时间",
        isShow: false,
        search: { el: "date-picker", props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" } }
      },
      {
        prop: "endTime",
        label: "结束时间",
        isShow: false,
        search: { el: "date-picker", props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" } }
      },
      {
        prop: "createdAt",
        label: "操作时间",
        minWidth: 200
      },
      {
        prop: "clientIp",
        label: "终端",
        minWidth: 200
      },
      {
        prop: "apiName",
        label: "操作内容",
        minWidth: 300
      },
      {
        prop: "userName",
        label: "操作员",
        minWidth: 200
      }
    ];
    console.log(error);
  }
};

onMounted(() => {
  getOperatorsSelData();
});
</script>
<style lang="scss">
@import "./index.scss";
</style>
